<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <!-- 顶部区域 -->
    <el-dialog
      :title="operateType === 'add' ? '新增用户' : '更新用户'"
      :visible.sync="isShow"
    >
      <el-form :model="staffForm" ref="staffForm">
        <el-form-item label="工号" :label-width="formLabelWidth">
          <el-input v-model="staffForm.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="staffForm.ordername" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属单位" :label-width="formLabelWidth">
          <el-input v-model="staffForm.company" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="staffForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预定时间" :label-width="formLabelWidth">
          <el-input
            type="date"
            v-model="staffForm.yudingTime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责项目" :label-width="formLabelWidth">
          <el-input v-model="staffForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签到状态" :label-width="formLabelWidth">
          <el-select
            v-model="staffForm.huizongStatus"
            placeholder="请选择签到状态"
          >
            <el-option label="未签到" value="未签到"></el-option>
            <el-option label="已签到" value="已签到"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="saveForm('staffForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="人员搜索">
            <el-input
              v-model="formInline.name"
              @blur="blur"
              size="small"
              placeholder="请输入搜索信息"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit" size="small"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button
          size="small"
          type="success"
          icon="el-icon-s-promotion"
          @click="orderCollect"
          >签到</el-button
        >
        <!-- <el-button size="small" type="warning">导出</el-button> -->
        <!-- 导出当前的表格数据 tableData -->
        <!-- <download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" :header="title"
          name="xxx公司列表.xls">
          <el-button size="small" type="warning">导出</el-button>
        </download-excel> -->
        <!-- 导出选中的编号 -->
        <download-excel
          class="export-excel-wrapper"
          :data="DetailsForm"
          :fields="json_fields"
          :header="title"
          name="xxx医护人员.xls"
        >
          <el-button size="small" icon="el-icon-download" type="warning"
            >导出</el-button
          >
        </download-excel>
        <el-button
          class="add"
          size="small"
          type="success"
          icon="el-icon-plus"
          @click="addSubmit"
          >添加</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="updateSubmit"
          icon="el-icon-edit"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          @click="deleteAll"
          >删除</el-button
        >
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-cell-class-name="active-header"
        cell-class-name="table-center"
        @select="select"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="code" label="工号">
          <template slot-scope="scope">
            <span>{{ scope.row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ordername" label="姓名"> </el-table-column>
        <el-table-column prop="company" label="所属单位"> </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="yudingTime" label="预定时间">
          <!-- <template slot-scope="scope">
            {{ dayjs(scope.row.yudingTime).format('YYYY-MM-DD') }}
          </template> -->
        </el-table-column>
        <el-table-column prop="price" label="负责项目"> </el-table-column>
        <el-table-column prop="huizongStatus" label="签到状态">
          <!-- <template slot-scope="scope">
            {{ scope.row.huizongStatus == 1 ? '未签到' : '已签到' }}
          </template> -->
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageSize="pageSize"
        @CurrentChange="CurrentChange"
      ></Pagination>
    </div>

    <!-- 抽屉组件 -->
    <!--<OrderDecs ref="child"></OrderDecs>-->
  </div>
</template>

<script>
import dayjs from "dayjs";
import Pagination from "@/components/pagination/Pagination.vue";
import OrderDecs from "./OrderDecs.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    Pagination,
    OrderDecs,
  },
  data() {
    return {
      formInline: {
        name: "",
      },
      operateType: "add",
      formLabelWidth: "120px",
      staffForm: {
        //表单数据
        id: "",
        code: "",
        ordername: "",
        company: "",
        phone: "",
        yudingTime: "",
        price: "",
        huizongStatus: "",
        isShow: true,
      },
      isShow: false,
      tableData: [], //列表数据展示
      total: 10,
      pageSize: 1,
      rows: {},
      ids: [], //操作id数组集合]
      DetailsForm: [], //需要导出的数据 [{},{}]
      json_fields: {
        //映射字段值
        // "编号": 'code',
        //数字处理--
        工号: {
          field: "code",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        姓名: "ordername",
        所属单位: "company",
        联系电话: "phone",
        预定时间: "yudingTime",
        负责项目: "price",
        签到状态: "huizongStatus",
      },
      title: "xxx体检医护人员列表", //
    };
  },
  methods: {
    ...mapMutations("product", ["changeRowData"]),
    dayjs,
    //点击进入详情界面------------------------
    OrderDecs() {
      this.$refs.child.drawer = true;
    },
    //点击汇总------1.获取选中的 2. 提交签到  3. 修改签到状态-------------------
    orderCollect() {
      //判断ids长度 至少>=1
      if (this.ids.length >= 1) {
        //医护人员签到
        console.log("this.ids---", this.ids);
        this.$api.changeStatus({ ids: this.ids.join(",") }).then((res) => {
          console.log("医护人员签到----", res.data);
          if (res.data.status === 200) {
            this.$message({
              type: "success",
              message: "签到成功!",
            });
            this.orderList(1);
          }
        });
      } else {
        this.$alert("签到", "签到", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `取消签到`,
            });
          },
        });
      }
    },
    //批量删除-------------------------------------
    deleteAll() {
      console.log("批量删除---ids---", this.ids);
      //传递的ids必须是字符串
      let idStr = this.ids.join(",");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求批量删除接口
          this.$api.batchDeleteS({ ids: idStr }).then((res) => {
            console.log("批量删除-------", res.data);
            if (res.data.status === 200) {
              //删除成功
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //------批量删除-----------------------
              //获取当前是否是最后一页的数据操作-----------
              //获取当前的数据可以展示多少页码  16/8=2   17/8=3  --- 最大的页码数
              let maxPage = Math.ceil(this.total / this.pageSize);
              console.log("最大的页码数--", maxPage);
              //获取选中的个数---
              let len = this.ids.length;
              console.log("选中的个数--- ", len);
              //分析：批量删除的时候 删的位置最后一页的数据  再去比较删除的个数与最后一页的条数比较
              //删除个数==最后一页的条数 选中高亮的页码-1 请求页码数据也就是高亮页码
              if (maxPage == this.current) {
                //最后一页的批量删除操作
                //最后一页的数据条数---------------
                let num =
                  this.total % this.pageSize == 0
                    ? this.pageSize
                    : this.total % this.pageSize;
                console.log("最后一页的数据条数---", num);
                if (num === len) {
                  this.current = this.current - 1 > 0 ? this.current - 1 : 1;
                }
              }
              this.orderList(this.current);
              //提示信息-------------
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取职工列表数据-------------------------------------
    async staffList(page) {
      let res = await this.$api.staffList({ page });
      console.log("职工列表数据----", res.data);
      this.tableData = res.data.data;
      this.total = res.data.total;
      this.pageSize = res.data.pageSize;
    },
    addSubmit() {
      this.isShow = true; //控制弹窗
      this.operateType = "add"; //默认新增
      this.staffForm = {
        //表单数据
        id: "",
        code: "",
        ordername: "",
        company: "",
        phone: "",
        yudingTime: "",
        price: "",
        huizongStatus: "",
        isShow: true,
      };
    },
    //添加---------------------------
    async addStaff(params) {
      let res = await this.$api.addStaff(params);
      console.log("添加列表--------", res.data);
      if (res.data.status === 200) {
        this.$message({
          message: "恭喜你，添加成功",
          type: "success",
        });
        //弹窗
        this.isShow = false;
      }
    },
    updateSubmit() {
      this.isShow = true; //控制弹窗
      this.operateType = "update"; //默认新增
      this.staffForm = this.rows; //取勾选数据行
    },
    //修改----------------------------------
    async updateStaff(params) {
      console.log("res");
      let res = await this.$api.updateStaff(params);
      console.log("修改", res.data);
      console.log(res.data, "状态码", res.data.status);
      if (res.data.status === 200) {
        this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
        //弹窗
        this.isShow = false;
      }
    },
    saveForm(formName) {
      //this.$refs.staffForm
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let {
            id,
            code,
            ordername,
            company,
            phone,
            yudingTime,
            price,
            huizongStatus,
          } = this.staffForm;
          if (this.operateType == "add") {
            console.log("添加列表", this.staffForm);
            this.addStaff({
              code,
              ordername,
              company,
              phone,
              yudingTime,
              price,
              huizongStatus,
            });
          } else {
            console.log("修改列表---", this.staffForm);
            this.updateStaff({
              id,
              code,
              ordername,
              company,
              phone,
              yudingTime,
              price,
              huizongStatus,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**搜索 */
    submit() {
      //搜索
      console.log("submit!", this.formInline.name);
      this.searchS(this.formInline.name);
    },
    blur() {
      //焦点去除
      if (!this.formInline.name) {
        this.orderList(1);
      }
    },
    //选中勾选内容-----------------
    select(selection, row) {
      console.log(selection, row);
      let arr = [];
      selection.forEach((ele) => {
        arr.push(ele.id);
      });
      this.ids = arr;
      //存储当前的勾选行的数据信息------
      this.DetailsForm = selection;
      this.rows = row;
    },
    //获取分页页码------------------------------
    CurrentChange(page) {
      this.orderList(page);
    },
    //搜索接口-----------------------------------------
    async searchS(searchS) {
      if (!searchS) {
        //点击空的查询x按钮
        return;
      }
      let res = await this.$api.searchS({ searchS });
      console.log("搜索数据--", res.data);
      if (res.data.status === 200) {
        //有数据
        let arr = res.data.result;
        arr.forEach((ele) => {
          ele.huizongStatus = ele.huizongStatus == 1 ? "未签到" : "已签到";
          ele.yudingTime = dayjs(ele.yudingTime).format("YYYY-MM-DD");
        });
        this.tableData = arr;
        //分页处理
        this.total = res.data.result.length;
        this.pageSize = res.data.result.length;
      } else {
        //查无数据
        this.tableData = [];
        this.total = 1;
        this.pageSize = 1;
      }
    },
    //获取列表-------------------------------------
    async orderList(page) {
      let res = await this.$api.orderList({ page });
      console.log("医务人员---", res.data);
      if (res.data.status == 200) {
        // this.tableData = res.data.data;
        let arr = res.data.data;
        arr.forEach((ele) => {
          ele.huizongStatus = ele.huizongStatus == 1 ? "未签到" : "已签到";
          ele.yudingTime = dayjs(ele.yudingTime).format("YYYY-MM-DD");
        });
        this.tableData = arr;
        console.log("数据tableData", this.tableData);

        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
      } else {
        this.tableData = [];
        this.total = 1;
        this.pageSize = 1;
      }
    },
  },
  created() {
    this.orderList(1);
  },
};
</script>

<style lang="less" scoped>
.header {
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;

  .el-form-item {
    margin-bottom: 16px;
  }

  .group {
    border: 1px solid #eee;
    padding: 8px;
  }
}

.content {
  background: #fff;

  /deep/ .active-header {
    color: #333;
    text-align: center;
  }

  /deep/ .table-center {
    text-align: center;
  }

  .pagination {
    padding: 10px;
  }
}
.export-excel-wrapper {
  display: inline-block;
  margin-left: 10px;
  margin-right: 880px;
  button {
    padding-left: 16px;
    padding-right: 16px;
  }
}
</style>
